iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
1
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 18

Chrome Extension 18 - 今天要吃啥產生器

  • 分享至 

  • xImage
  •  

每天花時間想要吃啥很麻煩,所以就做了一個產生器 :

畫面部分,直接繼續使用 element ui 來製作

  • v-on:keyup.enter.native 可以讓你按下 enter 鍵後送出資料
<template lang="pug">
<el-container>
  <el-main>
    <el-row>
      <el-col :span="12">
          <el-input v-model="name" placeholder="輸入名稱" v-on:keyup.enter.native="addItem"></el-input>
      </el-col>
      <el-col :span="8">
          <el-button type="success" @click="addItem">加入菜單</el-button>
      </el-col>
    </el-row>
    <el-row>
      <ul v-for="(item,index) in items">
        <li>
          <span>{{item}}</span>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteItem(index)"></el-button>
        </li>
      </ul>
    </el-row>
    <el-row>
      <el-button type="success" @click="radomFood">隨機菜單</el-button>
      <span>{{result}}</span>
    </el-row>
  </el-main>
</el-container>
</template>

畫面如下 :
https://ithelp.ithome.com.tw/upload/images/20181102/20094223ImgPrWINu7.png

然後是程式碼部分 :

<script>
  export default {
    data: () => ({
      name : '',
      items :[],
      result : ''
    }),
    computed: { },
    created () { },
    mounted() {
      var vm = this;
      vm.loadData();
    },
    updated() {
      var vm = this;
      vm.saveData();
    },
    methods: {
      addItem (){
        var item = this.name;
        this.name = '';
        this.items.push(item);
      },
      deleteItem (index){
          this.items.splice(index,1);
      },
      loadData : function(){
          var vm = this; 
          chrome.storage.local.get("tempData",function(result) {
          vm.items = result.tempData;

          if(vm.items=== undefined)
          {
            vm.items = [];
          }
        });
      },
      saveData : function(){
        chrome.storage.local.set({"tempData" : this.items},function() {});
      },
      radomFood () {
          var vm = this;
          var x = Math.floor((Math.random() * vm.items.length));
          vm.result = '今天吃 : ' + vm.items[x];
      },
    }
  }
</script>
<style lang="scss">
  body {
    width : 520px
  }
</style>

執行結果 :
https://ithelp.ithome.com.tw/upload/images/20181102/200942232YuV1P08sx.png

因為直接輸出感覺比較無感,所以增加了特效 :

      radomFood () {
          var vm = this;
          
          var started = new Date().getTime();
          let animationTimer = setInterval(function() {
            if (new Date().getTime() - started > 5000) {
            clearInterval(animationTimer);
            vm.result = vm.result + "!!!!";
             } else {
              var x = Math.floor((Math.random() * vm.items.length));
              vm.result = '今天吃 : ' + vm.items[x];
            }
          }, 100);
      },

https://blog.givemin5.com/wp-content/uploads/2018/11/ezgif-6-9f4453c9a127.gif

感謝收看 :)


上一篇
Chrome Extension 17 - 從 npm 下載 vue 範本使用
下一篇
Chrome Extension 19 - 隨手筆記功能
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言